<template>
	<view class="container flex-c">
		<uni-nav-bar class="ch-nav" height="88rpx" backgroundColor="#ffffff" leftWidth="90rpx" rightWidth="90rpx" color="#333" :fixed="true" :padding="false" :border="true" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit"></image>
			</template>
			<text class="title">福利大放送  豪礼享不停</text>
		</uni-nav-bar>
		<view class="notice flex-r ac jc">
			<image class="notice-img" src="@/public/images/user/notice.gif" mode="aspectFit"></image>
			<text class="text-regular">领取的优惠券只能在APP中使用</text>
		</view>
		<view class="body flex-c">
			<image class="top" src="@/public/images/other/lqyhq_bg.png" mode="widthFix"></image>
			<view class="center flex-c" v-if="receiveCouponRows[1]">
				<view class="center-title">
					<image src="@/public/images/other/yhqlb.png" mode="heightFix"></image>
				</view>
				<template v-for="(list, key) in receiveCouponRows">
					<view class="center-content flex-c" :key="key" v-if="key > 0">
						<view class="center-des flex-r">
							<image src="@/public/images/other/zb.png" mode="heightFix"></image>
							<text class="text" v-if="key==1">新人专享</text>
							<text class="text" v-if="key==2">使用2张优惠券可解锁</text>
							<text class="text" v-if="key==3">使用4张优惠券可解锁</text>
							<text class="text" v-if="key==4">使用9张优惠券可解锁</text>
							<image src="@/public/images/other/yb.png" mode="heightFix"></image>
						</view>
						<view class="center-list flex-r" :class="{'one': list.length == 1}">
							<view class="coupon flex-c" v-for="(coupon, index) in list" :class="{'no': !coupon.isConform, 'have': coupon.isReceive || haveReceiveList.indexOf(key) > -1}" :key="index">
								<view class="coupon-title flex-r">
									<text v-if="coupon.type == 1">满减劵</text>
									<text v-if="coupon.type == 2">无门槛券</text>
									<text v-if="coupon.type == 3">免单券</text>
									<text v-if="coupon.type == 4">折扣券</text>
								</view>
								<view class="coupon-value" :class="{'start': coupon.type < 3}">
									<template v-if="coupon.type < 3">
										<text class="title">{{coupon.usedAmount || 0}}</text>
									</template>
									<text v-if="coupon.type == 3" class="title mr0">免单</text>
									<text v-if="coupon.type == 4" class="title mr0">折扣</text>
								</view>
								<view class="coupon-des">
									<text v-if="coupon.type == 1">满{{coupon.withAmount}}可用</text>
									<text v-if="coupon.type == 2">无门槛</text>
									<text v-if="coupon.type == 3">最高消费{{coupon.usedAmount || 0}}</text>
									<text v-if="coupon.type == 4">最高消费{{coupon.usedAmount || 0}}</text>
								</view>
								<view class="fenge"></view>
								<view class="coupon-btn">
									<button type="default" size="mini" v-if="coupon.isReceive || haveReceiveList.indexOf(key) > -1">已领取</button>
									<button type="default" size="mini" v-else @tap="userReceiveCoupons(key)">立即领取</button>
								</view>
							</view>
						</view>
					</view>
				</template>
			</view>
			<view class="bottom flex-c">
				<view class="rule-title">
					<image src="@/public/images/other/hdgz.png" mode="heightFix"></image>
				</view>
				<view class="rule-content flex-c">
					<text>1.  第一级优惠券新用户都可领取；第二级、三级、四级优惠券需要消费上级获得的优惠券后才可解锁领取。例如第二级优惠券需要消费2张第一级的优惠券后才可领取，其他的以此类推。</text>
					<text>2.  优惠券的使用有效期从领取之日开始算起。请尽快消费使用～</text>
					<text>3.  活动最终解释权归彩虹体育所有</text>
				</view>
			</view>
		</view>
		<view class="foot">
			<view class="submit-box">
				<image src="@/public/images/other/an.png" mode="aspectFit" @tap="userReceiveCoupons('all')"></image>
			</view>
		</view>
		<view class="full-screen flex-r ac jc" v-if="showToast">
			<view class="success flex-c ac">
				<view class="content flex-c ac">
					<image class="bgimg" src="@/public/images/user/lqcg_tc.png" mode="aspectFit"></image>
					<view class="info flex-c ac">
						<image src="@/public/images/user/lqcg_z.png" mode="aspectFit"></image>
						<view class="color-grey">
							恭喜您，优惠券已领取成功
						</view>
						<button class="btn-default" @tap="showToast = false">朕知道了</button>
					</view>
				</view>
				<view class="close flex-c" @tap="showToast = false">
					<image src="@/public/images/user/qx_x.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				receiveCouponRows: [],
				showToast: false,
				haveReceiveList: [],
			}
		},
		computed: {
			user() {
				return this.$store.state.user
			},
			joinNewLevel() {
				return this.$store.state.user.joinNewLevel ? this.$store.state.user.joinNewLevel + 1 : 1
			}
		},
		onLoad() {
			this.getReceiveCouponRows(1)
		},
		methods: {
			//查询用户待领取优惠券（用户阶段解锁）
			getReceiveCouponRows(level) {
				this.$http.get({
					url: '/api/appUser/queryReceiveRecommendExpertRows',
					data: {
						level: 'pt_award_'+level.toString(),
						userId: this.user.userId
					},
					noLoading: true
				}).then(data => {
					console.log(data);
					if(data.success && data.result){
						this.$set(this.receiveCouponRows, level, data.result)
						//this.receiveCouponRows = data.result
						if(level < 4){
							this.getReceiveCouponRows(level+1)
						}
						console.log(this.receiveCouponRows);
					}else{
						console.log(data.message)
					}
				}).catch((err) => {
					console.log(err)
				})
			},
			//领取优惠券
			userReceiveCoupons(key){
				if(!this.$store.state.isLogin){
					this.$CHS.goUserLogin()
					return
				}
				if(this.haveReceiveList.indexOf(this.joinNewLevel) > -1 || this.joinNewLevel >= this.receiveCouponRows.length){
					return
				}
				if(key != 'all' && key > this.joinNewLevel){
					this.$ShowToast({type:2, text: '当前优惠券不满足领取条件'})
					return
				}
				let couponIds = []
				let couponList = this.receiveCouponRows[this.joinNewLevel] || []
				couponList.forEach( (item, index) => {
					if(!item.isReceive && item.isConform){
						couponIds.push(item.awardCouponId)
					}
				})
				if(couponIds[0] && this.joinNewLevel && !this.isReceiveing){
					this.isReceiveing = true
					this.$http.post({
						url: '/api/appUser/receiveCouponsByUserId',
						data: {
							couponIds: couponIds.toString(),
							sourceFrom: 'pt_award_' + this.joinNewLevel.toString(),
							userId: this.user.userId
						},
					}).then(data => {
						console.log(data);
						if(data.success){
							this.showToast = true
							this.haveReceiveList.push(this.joinNewLevel)
						}else{
							uni.showToast({
								title: data.message || '领取失败，请重试',
								icon: 'none'
							})
						}
						this.isReceiveing = false
					}).catch((err) => {
						console.log(err)
						uni.showToast({
							title: '领取失败，请重试',
							icon: 'none'
						})
						this.isReceiveing = false
					})
				}else{
					this.$ShowToast({type:2, text: '当前没有可以领取的优惠券'})
				}
			},
		}
	}
</script>

<style lang="scss">
	.container{
		background: #FF9900;
		padding-bottom: var(--safe-area-inset-bottom);
	}
	.notice{
		max-width: $max-width;
		margin: $pc-margin;
		position: fixed;
		top: var(--navbar-height);
		left: 0;
		right: 0;
		height: 60rpx;
		background: rgba(0, 0, 0, 0.6);
		font-weight: 500;
		color: #FFFF80;
		z-index: 10;
		.notice-img{
			width: 32rpx;
			height: 32rpx;
			margin-right: 20rpx;
		}
	}
	.body{
		.top{
			width: 100%;
			max-width: $max-width;
			margin: $pc-margin;
		}
		.center{
			//background: #FFE20F;
			background-image: url("~@/public/images/other/yhqlb_bg.png");
			background-size: 100% 100%;
			background-repeat: no-repeat;
			border-radius: 30rpx;
			margin: 10rpx 20rpx 0;
			padding: 0 34rpx 30rpx;
			align-items: center;
			.center-title{
				height: 96rpx;
				image{
					height: 96rpx;
				}
			}
			.center-content{
				align-items: center;
				width: 100%;
			}
			.center-des{
				margin: 40rpx 0 30rpx;
				align-items: center;
				image{
					height: 26rpx;
				}
				.text{
					margin: 0 30rpx;
					font-size: 30rpx;
					color: #FF8400;
					line-height: 30rpx;
				}
			}
			.center-list{
				width: 100%;
				justify-content: space-between;
				&.one{
					justify-content: center;
				}
				.coupon{
					background-image: url("~@/public/images/other/yhq_bg.png");
					background-size: 100%;
					background-repeat: no-repeat;
					border-radius: 10rpx;
					align-items: center;
					width: 198rpx;
					height: 284rpx;
					.coupon-title{
						background-image: url("~@/public/images/other/wlq.png");
						background-repeat: no-repeat;
						background-size: 100%;
						width: 120rpx;
						height: 37rpx;
						font-size: 20rpx;
						color: #FFFEF8;
						line-height: 24rpx;
						align-items: center;
						justify-content: center;
					}
					.coupon-value{
						margin: 20rpx 0 14rpx;
						color: #FF0000;
						.title{
							font-size: 60rpx;
							font-family: Arial;
							font-weight: bold;
							line-height: 44rpx;
							&.mr0{
								padding-left: 0;
							}
						}
						.des{
							font-size: 16rpx;
							line-height: 24rpx;
						}
						image{
							margin-right: 10rpx;
							height: 20rpx;
						}
					}
					.coupon-des{
						background-image: url("~@/public/images/other/wlq_tj.png");
						background-repeat: no-repeat;
						background-size: 100%;
						width: 180rpx;
						height: 40rpx;
						text-align: center;
						font-size: 20rpx;
						color: #FF0000;
						line-height: 40rpx;
					}
					.fenge{
						margin-top: 20rpx;
						width: 152rpx;
						height: 2rpx;
						background-repeat: no-repeat;
						background-size: 100%;
						background-image: url("~@/public/images/other/wlqx.png");
					}
					.coupon-btn{
						margin: 20rpx 0;
						height: 60rpx;
						width: 160rpx;
						button{
							width: 160rpx;
							background: linear-gradient(86deg, #FF333D 0%, #FF8080 100%);
							border-radius: 10rpx;
							font-size: 24rpx;
							color: #FFFFFF;
							line-height: 60rpx;
							padding: 0;
							border: none;
						}
					}
					&.have{
						.coupon-title{
							background-image: url("~@/public/images/other/ylq.png");
						}
						.coupon-value{
							color: #FF7F7F;
							image{
								filter: grayscale(50%);
							}
						}
						.coupon-des{
							background-image: url("~@/public/images/other/ylq_tj.png");
							color: #FF7F7F;
						}
						.fenge{
							background-image: url("~@/public/images/other/ylqx.png");
						}
						.coupon-btn{
							button{
								background: linear-gradient(86deg, #FF999E 0%, #FFBFBF 100%)
							}
						}
					}
					&.no{
						.coupon-title{
							background-image: url("~@/public/images/other/wjs.png");
						}
						.coupon-value{
							color: #999999;
							image{
								filter: grayscale(1);
							}
						}
						.coupon-des{
							background-image: url("~@/public/images/other/wjs_tj.png");
							color: #999999;
						}
						.fenge{
							background-image: url("~@/public/images/other/wjsx.png");
						}
						.coupon-btn{
							button{
								background: linear-gradient(86deg, #CCCCCC 0%, #D9D9D9 100%);
							}
						}
					}
				}
			}
		}
		.bottom{
			//background: #FFE20F;
			background-image: url("~@/public/images/other/hdgzbg.png");
			background-size: 100% 100%;
			background-repeat: no-repeat;
			border-radius: 30rpx;
			margin: 20rpx 20rpx 140rpx;
			padding: 0 20rpx 30rpx;
			//height: 492rpx;
			align-items: center;
			.rule-title{
				height: 96rpx;
				image{
					height: 96rpx;
				}
			}
			.rule-content{
				margin-top: 40rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FF7F00;
				line-height: 46rpx;
				text-align: justify;
			}
		}
	}
	.foot{
		max-width: $max-width;
		margin: $pc-margin;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #FF9900;
		border-top: 1rpx solid #ED8E00;
		padding-bottom: var(--safe-area-inset-bottom);
		box-sizing: border-box;
		.submit-box{
			margin: 0;
			padding: 12rpx 20rpx;
			height: 120rpx;
			box-sizing: border-box;
			image{
				width: 690rpx;
				height: 96rpx;
			}
		}
	}
	.full-screen{
		z-index: 997;
		touch-action: none;
		.success{
			//padding: 340rpx 115rpx 0;
			.content{
				border-radius: 20rpx;
				position: relative;
				.bgimg{
					width: 520rpx;
					height: 560rpx;
				}
				.info{
					position: absolute;
					top: 78rpx;
					image{
						width: 194rpx;
						height: 48rpx;
					}
					.color-grey{
						margin-top: 27rpx;
						font-size: 28rpx;
						line-height: 28rpx;
					}
					.btn-default{
						margin-top: 242rpx;
						width: 320rpx;
						height: 88rpx;
						background: #FFFFFF;
						border: none;
						border-radius: 44rpx;
						font-size: 32rpx;
						color: #0055FF;
						line-height: 88rpx;
					}
				}
			}
			.close{
				align-items: center;
				image{
					width: 80rpx;
					height: 160rpx;
				}
			}
		}
	}
</style>
